<template>
  <div class="home">
    <HomeTop />
    <van-sticky>
      <div class="waibian" v-if="scrollTop > 180">
        <div class="hometopinp" @click="funhometop()">
          <span class="search"><img src="../assets/image/icon_search.png" /></span>
          <span class="hometoptext">请输入食物名称</span>
          <span class="sao"><img src="../assets/image/search_sao.png" /></span>
        </div>
      </div>
    </van-sticky>

    <div class="classlists">
      <FunctionModle @click.native="$router.push({ path: '/dlzong' })" />
      <ClassIfyList v-for="(item, index) in groupcount" :key="index" :item="item" @click.native="sofoodbank(false)" />
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import HomeTop from "@/components/HomeTop.vue";
import ClassIfyList from "@/components/ClassIfyList.vue";
import FunctionModle from "@/components/FunctionModle.vue";

export default {
  name: "Home",
  components: {
    HomeTop,
    ClassIfyList,
    FunctionModle,
  },
  data() {
    return {
      groupcount: [],
      scrollTop: 0,
    };
  },
  created() {
    this.axios
      .get("https://food.boohee.com/fb/v1/categories/list")
      .then((res) => {
        this.groupcount = res.data.group;
      });
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll, true);
  },

  destroyed() {
    // 离开该页面需要移除这个监听的事件，不然会报错
    window.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    ...mapMutations(["sofoodbank", "showsearch"]),
    funhometop() {
      this.$router.push({ path: '/search' });
      this.sofoodbank(false);
      this.showsearch(true);
    },
    handleScroll() {
      this.scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      // console.log(this.scrollTop);
    },

    // 滚动条回到顶部
    backTop() {
      if (this.scrollTop > 10) {
        document.documentElement.scrollTop = 0;
      }
    },
  },

};
</script>

<style lang="less" scoped>
.home {
  width: 100vw;
  background: #f6f6f6;

  .waibian {
    width: 100%;
    background: orange;
    padding: 10px 5px;

    .hometopinp {
      // margin-top: 30px;
      width: 100%;
      height: 40px;
      border-radius: 10px;
      background-color: white;
      display: flex;
      align-items: center;

      .search {
        display: block;
        width: 15px;
        margin: 0 6px;

        img {
          width: 100%;
          vertical-align: middle;
        }
      }

      .hometoptext {
        flex: 1;
        color: #eda273;
        font-size: 12px;
      }

      .sao {
        display: block;
        width: 15px;
        margin: 0 5px;
      }

      span {
        img {
          vertical-align: middle;
        }
      }
    }
  }

  .classlists {
    padding: 0 10px;
  }
}
</style>
